<!--
 转盘
 @Author: mosowe
 @Date:2023-08-10 18:01:01
-->

<template>
  <view
    class="rotary-table-component"
    :style="{
      width: props.radius * 2 + 'rpx',
      height: props.radius * 2 + 'rpx',
    }"
  >
    <view
      class="content-table"
      :style="{
        transform: 'rotate(' + deg + 'deg)',
      }"
    >
      <!-- <sector :radius="props.height / 2"></sector> -->
      <sector
        v-for="(item, index) in props.list"
        :key="index"
        :radius="props.radius"
        :text="item.title"
        :bgColor="item.bgColor"
        :color="item.color"
        :image="item.image"
        :size="item.size"
        :imageSize="item.imageSize"
        :angle="singleAngle"
        :index="index"
      ></sector>
    </view>
    <view class="turntable_pointer" @click="start">
      <image src="@/static/images/turnable_btn.png" class="icon"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import sector from './sector.vue'
import { computed, ref } from 'vue'

interface listItem {
  title: string //文本
  color?: string //文字颜色
  size?: string // 文字字号
  bgColor?: string //区域背景色
  image?: string //图片
  imageSize?: string //图片宽高
}
interface Props {
  list: listItem[] // 奖项
  radius?: number // 圆盘半径
  speed?: number // 速度
}

const props = withDefaults(defineProps<Props>(), {
  radius: 300,
  speed: 20,
})

// emits
interface EmitsType {
  (e: 'start'): void // 开始抽奖
  (e: 'end'): void // 结束
}
const emits = defineEmits<EmitsType>()

const deg = ref<number>(0)
const singleAngle = computed(() => {
  return Number((360 / props.list.length).toFixed(2))
})
const isStart = ref(false)
const timer = ref<any>(null)
const awardNumer = ref<number>(0) // 中奖序号,0表示还没有给出，1开始算
const endAddAngle = computed(() => {
  return 360 - ((awardNumer.value - 1) * singleAngle.value + singleAngle.value / 2) // 中奖角度
})

// 点击开始抽奖
const start = () => {
  emits('start')
}
// 开始转
const begin = () => {
  if (isStart.value) return
  isStart.value = true
  turnRound()
}

// 转动动画
const turnRound = () => {
  let beginDeg = deg.value
  let beginSpeed = props.speed

  const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360 // 随机旋转几圈再停止

  let cAngle: any
  beginDeg = 0
  let waitDeg = 0 // 等待接口返回前转的角度

  timer.value = setInterval(() => {
    if (!awardNumer.value) {
      beginDeg += beginSpeed
      waitDeg = beginDeg
    } else {
      if (waitDeg) {
        beginDeg = 0
        waitDeg = 0
      }
      if (beginDeg < rangeAngle) {
        beginDeg += beginSpeed
      } else {
        let a = (endAddAngle.value + rangeAngle - beginDeg) / beginSpeed
        cAngle = a > beginSpeed ? beginSpeed : a < 1 ? 1 : a
        beginDeg += cAngle

        if (beginDeg >= endAddAngle.value + rangeAngle) {
          beginDeg = endAddAngle.value + rangeAngle
          isStart.value = false
          clearInterval(timer.value)
          emits('end')
        }
      }
    }

    deg.value = beginDeg
  }, 1000 / 60)
}

// 准备停止转动
const stop = (number: number) => {
  awardNumer.value = number
}

defineExpose({
  begin,
  stop,
})
</script>

<style lang="scss" scoped>
.rotary-table-component {
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.content-table {
  width: 100%;
  height: 100%;
}
.turntable_pointer {
  position: absolute;
  width: 150rpx;
  height: 180rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(1deg);
  .icon {
    width: 100%;
    height: 100%;
  }
}
</style>
